<template>
    <h2>增加房型</h2>
    <table border="1">
        <tr>
            <td>房型名称</td>
            <td><input type="text" v-model="state.roomTypeName"></td>
        </tr>
        <tr>
            <td>房型图片</td>
            <td><input type="file" @change="roomchange">
                <img v-if="src!=''" :src="'https://localhost:7125'+src" alt="" width="50" height="50">
            </td>
        </tr>
        <tr>
            <td>房型面积</td>
            <td><input type="text" v-model="state.roomTypeArea"></td>
        </tr>
        <tr>
            <td>可住人数</td>
            <td><input type="text" v-model="state.inPeople"></td>
        </tr>
        <tr>
            <td>房价</td>
            <td><input type="text"  v-model="state.roomTypePrice"></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="button" value="增加" @click="radd"></td>
        </tr>
    </table>
</template>

<script setup lang="ts">
import {reactive,toRefs} from 'vue';
import axios from 'axios';
import {useRouter} from 'vue-router';
const router = useRouter()

const data=reactive({
    state:{
  "roomTypeName": "",
  "roomTypeImg": "",
  "roomTypeArea":'',
  "inPeople":'',
  "roomTypePrice":'',
  "isDeleted": false
    },
    src:''
})

const {state,src}=toRefs(data);

const radd=()=>{
    if(state.value.roomTypeName=='')
    {
        alert('房型名称不能为空');
        return;
    }
    if(state.value.roomTypeImg=='')
    {
        alert('房型图片不能为空');
        return;
    }
    if(state.value.roomTypeArea=='')
    {
        alert('房型面积不能为空');
        return;
    }
    if(isNaN(Number(state.value.roomTypeArea)))
    {
        alert('房型面积必须为数字');
        return;
    }
    if(state.value.inPeople=='')
    {
        alert('可住人数不能为空');
        return;
    }
    if(isNaN(Number(state.value.inPeople)))
    {
        alert('可住人数必须为数字');
        return;
    }
    if(state.value.roomTypePrice=='')
    {
        alert('房价不能为空');
        return;
    }
    if(isNaN(Number(state.value.roomTypePrice)))
    {
        alert('房价必须为数字');
        return;
    }
    axios({
        url:'/api/Room/AddRoomType',
        method:'post',
        data:state.value
    })
    .then(res=>{
        console.log(res);
        if(res.data.data>0)
        {
            alert('新增房型成功');
        router.push('/ShowRoomType');
        }
        else
        {
            alert('新增房型失败');
        return;
        }
    })
    .catch(err=>{
        console.log(err);
    })
}

//定义一个formdata在前端进行存取图片
const roomchange=(e:any)=>{
   console.log(e)
   var Formdata=new FormData()
   Formdata.append('file',e.target.files[0])
   axios({
    url:'/api/Upload',
    method:'post',
    data:Formdata
   })
   .then(res=>{
    console.log(res);
    if(res.data.code==1002)
    {
        alert('上传的不是图片');
        return;
    }
    else if(res.data.code==1001)
    {
        alert('上传的图片超过2M');
        return;
    }
    else{
        alert('上传的是图片');
        src.value="https://localhost:7125"+res.data.data
        state.value.roomTypeImg=res.data.data
    }
 })
   .catch(err=>{
    console.log(err);
   })
}
</script>